<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="titleView">
			<view class="controlButton" @click="back">
				<u-icon name="arrow-left" color="#ffffff"></u-icon>
				上一级
			</view>
			<text>{{getCategoryLayerName()}}</text>
			<view class="controlButton" @click="commit">
				完成
				<u-icon name="checkmark" color="#ffffff"></u-icon>
			</view>
		</view>
		<view style="height: 20px;"></view>
		<!-- 骨架屏 -->
		<u-skeleton rows="7" :loading="dataLoading"></u-skeleton>
		<u-empty v-if="curLayerCategoryData.length==0&&dataLoading==false" mode="search" texColor="#ffffff"
			iconSize="180" iconColor="#2b92ff" text="分类选择完成,请点击右上角的完成" textColor="#2b92ff" textSize="18" marginTop="30">
		</u-empty>
		<u-list v-else>
			<u-list-item v-for="(category, index) in curLayerCategoryData" :key="index">
				<u-cell :title="category.name" @click="selectCurCategory(category)">
					<u-avatar slot="icon" shape="square" size="35" :src="category.icon"
						customStyle="margin: -3px 5px -3px 0"></u-avatar>
				</u-cell>
			</u-list-item>
		</u-list>

	</view>
</template>

<script>
	import {
		getProductCategoryTree
	} from "@/api/market/category.js";
	export default {
		data() {
			return {
				categoryNameList: ["分类未选择"],
				categoryTreeData: [],
				// 当前层级分类数据
				curLayerCategoryData: [],
				// 已经选择的层级分类数据
				haveSelectLayerCategoryData: [],
				// 层级
				layer: 0,
				// 商品所属分类
				productCategoryId: 0,
				dataLoading: false,
			}
		},
		created() {
			this.getProductCategoryTree();
		},
		methods: {
			getCategoryLayerName() {
				let str = '';
				for (let i = 0; i < this.categoryNameList.length - 1; i++) {
					str += this.categoryNameList[i] + '/';
				}
				return str + this.categoryNameList[this.categoryNameList.length - 1];
			},
			/**
			 * 查询商品分类的树形结构数据
			 */
			getProductCategoryTree() {
				this.dataLoading = true;
				getProductCategoryTree().then(res => {
					// console.log("getProductCategoryTree:" + JSON.stringify(res));
					this.categoryTreeData = res.data;
					this.curLayerCategoryData = this.categoryTreeData;
					this.dataLoading = false;
				})
			},
			/**
			 * 选择分类
			 * @param {Object} category 当前选择的分类
			 */
			selectCurCategory(category) {
				if (this.layer == 0) {
					this.categoryNameList = [];
				}
				this.categoryNameList.push(category.name);
				this.productCategoryId = category.id;
				this.layer++;
				// 将当前层的数据设置进haveSelectLayerCategoryData
				this.haveSelectLayerCategoryData.push(this.curLayerCategoryData);
				this.curLayerCategoryData = category.children;
				if (this.curLayerCategoryData.length == 0) {
					this.$refs.uToast.show({
						type: 'success',
						message: "分类选择完成，请提交数据",
						duration: 1000
					})
				}
			},
			/**
			 * 返回上一级
			 */
			back() {
				if (this.layer == 0) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "已经是第一层级，无法返回上一级"
					})
				} else {
					this.layer--;
					this.curLayerCategoryData = this.haveSelectLayerCategoryData[this.haveSelectLayerCategoryData.length -
						1];
					// 删掉最后一条数据
					this.haveSelectLayerCategoryData.splice(this.haveSelectLayerCategoryData.length - 1, 1);
				}
			},
			/**
			 * 提交分类数据
			 */
			commit() {
				if (this.curLayerCategoryData.length != 0) {
					this.$refs.uToast.show({
						type: 'error',
						message: "分类还没有选择完成，请继续选择"
					})
				} else {
					uni.setStorageSync("productCategoryId", this.productCategoryId);
					uni.setStorageSync("categoryNameList", this.categoryNameList);
					uni.navigateBack();
				}

			}

		}
	}
</script>

<style lang="scss">
	.container {
		background: #F6F6F6;
		min-height: 100vh;
		padding: 20rpx;

		.titleView {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #2b92ff;
			color: #ffffff;
			border-radius: 4px;

			.controlButton {
				// width: 100px;
				display: flex;
				// border: #2b92ff 1px solid;

				padding: 10px;
			}
		}
	}
</style>